<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content" ref="content">
      <slot></slot>
    </ul>
  </div>
</template>

<script>
import BScroll from "better-scroll"

export default {
  name: "scroll_x",
  data() {
    return {
      scroll: null
    }
  },
  props: {
    titlesCount: {
      type: Number,
      default: 4
    }
  },
  mounted() {
    this.$refs.content.style.width = Number((this.titlesCount * 14.5).toFixed(3)) + "vw";
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 解决移动端滚动问题
      observeDOM: true,
      scrollX: true,
      scrollY: false,
      click: true
    })
  },
}
</script>

<style scoped>

</style>